1
00:00:01,390 --> 00:00:04,110
Sekarang sebelum kita dapat menulis kode apa pun,

2
00:00:04,110 --> 00:00:08,360
kita perlu menginstal dan mengkonfigurasi editor kode.

3
00:00:08,360 --> 00:00:12,275
Jadi editor kode adalah alat utama bagi pengembang mana pun

4
00:00:12,275 --> 00:00:17,275
dan kami menggunakannya seperti namanya untuk menulis kode kami yang sebenarnya.

5
00:00:18,160 --> 00:00:21,930
Jadi sekarang mari kita unduh editor kode.

6
00:00:21,930 --> 00:00:25,480
Dan salah satu yang saya sarankan untuk digunakan semua orang

7
00:00:25,480 --> 00:00:30,150
adalah Visual Studio Code atau disingkat VS Code.

8
00:00:30,150 --> 00:00:31,890
Jadi ini menurut saya,

9
00:00:31,890 --> 00:00:35,840
editor kode terbaik sejauh ini yang ada.

10
00:00:35,840 --> 00:00:38,520
Dan itu bukan hanya pendapat saya sendiri.

11
00:00:38,520 --> 00:00:42,254
Jadi VS Code saat ini adalah yang paling populer

12
00:00:42,254 --> 00:00:47,020
dan editor kode yang paling banyak digunakan dan itu karena suatu alasan.

13
00:00:47,020 --> 00:00:50,990
Ini adalah yang terbaik dan termudah untuk digunakan dan tentu saja,

14
00:00:50,990 --> 00:00:52,950
itu sepenuhnya gratis.

15
00:00:52,950 --> 00:00:56,760
Sekarang ada alternatif jika Anda tidak menyukai VS Code

16
00:00:56,760 --> 00:00:58,152
untuk beberapa alasan.

17
00:00:58,152 --> 00:01:02,660
Jadi Anda bisa menggunakan Adam atau Anda bisa menggunakan sesuatu seperti Bracket

18
00:01:02,660 --> 00:01:06,080
juga, yang merupakan editor kode yang saya gunakan

19
00:01:06,080 --> 00:01:09,593
untuk mengajarkan versi sebelumnya dari kursus ini.

20
00:01:09,593 --> 00:01:13,500
Tapi sekali lagi, saya akan menggunakan VS Code dalam kursus ini.

21
00:01:13,500 --> 00:01:16,455
Jadi, saya sangat menyarankan Anda untuk mengikuti kursus ini,

22
00:01:16,455 --> 00:01:20,430
menggunakan editor kode yang sama persis untuk membuat segalanya lebih mudah

23
00:01:20,430 --> 00:01:21,894
untuk kamu ikuti.

24
00:01:21,894 --> 00:01:25,975
Jadi sekali lagi, editor kode ini sepenuhnya gratis

25
00:01:25,975 --> 00:01:29,240
dan itu berfungsi di setiap platform.

26
00:01:29,240 --> 00:01:32,760
Jadi unduh saja penginstal apa pun yang Anda perlukan

27
00:01:32,760 --> 00:01:36,410
untuk platform Anda sendiri, lalu instal tentunya,

28
00:01:36,410 --> 00:01:38,790
editor kode itu di komputer Anda.

29
00:01:38,790 --> 00:01:41,960
Dan setelah selesai, kembalilah ke video ini,

30
00:01:41,960 --> 00:01:45,030
agar kita bisa bersama-sama mengaturnya sedikit,

31
00:01:45,030 --> 00:01:48,463
supaya kita bisa memulai di bagian selanjutnya.

32
00:01:49,950 --> 00:01:53,960
Oke, jadi saya harap Anda berhasil menginstal VS Code

33
00:01:53,960 --> 00:01:56,614
di sistem Anda dan saat Anda membukanya,

34
00:01:56,614 --> 00:01:59,395
seharusnya terlihat seperti ini.

35
00:01:59,395 --> 00:02:03,230
Sekarang, warnanya mungkin semuanya berbeda,

36
00:02:03,230 --> 00:02:05,270
tapi kami akan memperbaikinya sebentar lagi.

37
00:02:05,270 --> 00:02:07,934
Dan mungkin layar selamat datang ini juga terlihat berbeda.

38
00:02:07,934 --> 00:02:09,532
Dan mungkin ikon ini ada di sini

39
00:02:09,532 --> 00:02:13,420
karena Anda mungkin pernah menginstal editornya suatu saat nanti

40
00:02:13,420 --> 00:02:15,254
setelah saya merekam video ini.

41
00:02:15,254 --> 00:02:19,433
Tapi bagaimanapun, hal-hal utama harus tetap berfungsi sama.

42
00:02:19,433 --> 00:02:24,433
Jadi mari kita mulai dengan memasang tema.

43
00:02:24,720 --> 00:02:28,090
Jadi tema pada dasarnya adalah semua warna yang Anda lihat

44
00:02:28,090 --> 00:02:29,260
ada di layar.

45
00:02:29,260 --> 00:02:31,490
Dan juga warnanya ada pada kode sebenarnya

46
00:02:31,490 --> 00:02:33,730
yang akan kamu tulis.

47
00:02:33,730 --> 00:02:37,597
Oke, sekarang Anda tidak perlu memasang tema.

48
00:02:37,597 --> 00:02:40,420
Jadi Anda cukup mengubah salah satu temanya saja

49
00:02:40,420 --> 00:02:43,913
yang sudah termasuk dalam VS Code.

50
00:02:43,913 --> 00:02:47,617
Jadi cukup klik di sini pada ikon ini dan kemudian warnai tema.

51
00:02:47,617 --> 00:02:51,395
Lalu di sini, Anda dapat mencoba salah satunya.

52
00:02:51,395 --> 00:02:53,840
Jadi jika Anda menyukai salah satunya,

53
00:02:53,840 --> 00:02:55,960
Anda cukup menyimpannya.

54
00:02:55,960 --> 00:02:59,555
Tapi seperti yang kalian lihat, tema yang saya punya adalah monokai pro ini

55
00:02:59,555 --> 00:03:04,555
dan yang ini tidak disertakan secara default oleh VS Code.

56
00:03:05,040 --> 00:03:08,830
Jadi jika Anda ingin memasang tema yang sama seperti saya,

57
00:03:08,830 --> 00:03:11,318
lalu cukup datang ke sini ke tab ekstensi ini

58
00:03:11,318 --> 00:03:16,203
lalu cari monokai pro.

59
00:03:17,240 --> 00:03:20,040
Oke, kalau begitu, ini yang pertama di sini.

60
00:03:20,040 --> 00:03:23,540
Dan kemudian Anda bisa, mungkin di suatu tempat di sini,

61
00:03:23,540 --> 00:03:25,012
klik unduh.

62
00:03:25,012 --> 00:03:29,975
Nah tema ini sebenarnya adalah tema berbayar yang bisa Anda beli

63
00:03:29,975 --> 00:03:33,600
dengan harga sekitar 10 dolar AS atau lebih.

64
00:03:33,600 --> 00:03:36,270
Namun sebenarnya Anda juga bisa menggunakan tema tersebut

65
00:03:36,270 --> 00:03:38,130
gratis selamanya.

66
00:03:38,130 --> 00:03:40,369
Ia kemudian hanya akan menanyakan Anda setiap beberapa hari

67
00:03:40,369 --> 00:03:42,460
bagimu untuk membelinya.

68
00:03:42,460 --> 00:03:46,049
Namun bagi saya, hal itu tidak pernah menjadi masalah besar.

69
00:03:46,049 --> 00:03:49,260
Sekarang, saya hanya ingin segera menyebutkan bahwa saya tidak melakukannya

70
00:03:49,260 --> 00:03:52,400
dengan cara apa pun berafiliasi dengan tema

71
00:03:52,400 --> 00:03:55,410
dan ini bukan iklan.

72
00:03:55,410 --> 00:03:57,391
Jadi ini hanyalah tema yang saya suka

73
00:03:57,391 --> 00:04:00,000
dan yang saya gunakan setiap hari.

74
00:04:00,000 --> 00:04:02,940
Namun tentu saja Anda bisa menggunakan tema yang berbeda

75
00:04:02,940 --> 00:04:06,050
atau tema yang sudah Anda gunakan sendiri.

76
00:04:06,050 --> 00:04:07,560
Namun jika Anda menyukai tema,

77
00:04:07,560 --> 00:04:11,120
maka Anda dapat mendukung pembuatnya atau Anda dapat menggunakan temanya

78
00:04:11,120 --> 00:04:15,860
gratis atau bisa juga tentunya menggunakan tema lain.

79
00:04:15,860 --> 00:04:18,991
Dan satu tema lainnya yang sangat mirip

80
00:04:18,991 --> 00:04:23,168
dan yang sebenarnya sudah hadir dengan VS Code

81
00:04:23,168 --> 00:04:27,093
adalah monokai klasik.

82
00:04:27,990 --> 00:04:29,230
Jadi yang ini.

83
00:04:29,230 --> 00:04:32,100
Jadi warna di sini terlihat sedikit berbeda,

84
00:04:32,100 --> 00:04:35,734
namun tema monokai pro yang saya gunakan sebenarnya berbasis

85
00:04:35,734 --> 00:04:37,230
yang satu ini.

86
00:04:37,230 --> 00:04:40,280
Oleh karena itu, warnanya sangat mirip.

87
00:04:40,280 --> 00:04:43,071
Oleh karena itu, yang ini juga merupakan pilihan yang bagus

88
00:04:43,071 --> 00:04:46,810
jika Anda ingin menggunakan tema yang sangat mirip dengan saya,

89
00:04:46,810 --> 00:04:49,850
tapi tidak ingin menggunakan monokai pro,

90
00:04:49,850 --> 00:04:53,460
tapi saya akan mengembalikannya ke monokai pro sekarang.

91
00:04:53,460 --> 00:04:56,280
Jadi itulah temanya.

92
00:04:56,280 --> 00:04:58,880
Maka dari itu, mari kita tidak melanjutkan dan juga berbicara

93
00:04:58,880 --> 00:05:01,229
tentang pengaturan VS Code.

94
00:05:01,229 --> 00:05:04,410
Jadi di sini, saya akan menunjukkan beberapa pengaturan

95
00:05:04,410 --> 00:05:06,053
yang saya gunakan dalam video kursus

96
00:05:06,053 --> 00:05:08,643
dan itu mungkin harus Anda gunakan juga

97
00:05:08,643 --> 00:05:11,809
untuk memudahkan anda mengikuti videonya

98
00:05:11,809 --> 00:05:15,610
dan juga untuk membuat kode sendiri nanti.

99
00:05:15,610 --> 00:05:18,871
Jadi setting yang pertama adalah setting auto save ini

100
00:05:18,871 --> 00:05:22,273
yang harus Anda atur pada perubahan fokus.

101
00:05:22,273 --> 00:05:25,871
Oke dan seterusnya, yang akan dilakukan adalah kapan saja

102
00:05:25,871 --> 00:05:30,320
Anda meninggalkan editor kode atau membuka file lain,

103
00:05:30,320 --> 00:05:34,050
maka secara otomatis akan menyimpan file itu tanpa Anda miliki

104
00:05:34,050 --> 00:05:35,770
untuk melakukan apa pun.

105
00:05:35,770 --> 00:05:37,813
Jadi, itu sangat membantu.

106
00:05:37,813 --> 00:05:40,565
Sekarang, jika ini tidak muncul di sini untuk Anda,

107
00:05:40,565 --> 00:05:44,488
di sini, Anda cukup mencari semuanya.

108
00:05:44,488 --> 00:05:48,947
Jadi Anda cukup mencari simpan otomatis seperti ini.

109
00:05:48,947 --> 00:05:52,550
Dan sekali lagi, ubahlah menjadi perubahan yang tidak fokus.

110
00:05:52,550 --> 00:05:55,780
Kemudian Anda juga bisa mengubah ukuran font,

111
00:05:55,780 --> 00:05:57,911
tapi itu tidak terlalu penting bagimu.

112
00:05:57,911 --> 00:06:01,807
Lalu satu lagi adalah pengubah multi kursor ini.

113
00:06:01,807 --> 00:06:04,074
Dan yang ini terdengar agak aneh,

114
00:06:04,074 --> 00:06:08,091
tetapi Anda cukup mengaturnya ke perintah kontrol.

115
00:06:08,091 --> 00:06:10,370
Atau Anda dapat membiarkannya di alt.

116
00:06:10,370 --> 00:06:11,910
Jadi ketika Anda membutuhkannya,

117
00:06:11,910 --> 00:06:14,714
ketahuilah yang mana di antara keduanya yang Anda pilih.

118
00:06:14,714 --> 00:06:18,180
Namun untuk saat ini, sekali lagi, hal tersebut tidak penting.

119
00:06:18,180 --> 00:06:20,793
Saya hanya akan mulai menggunakannya nanti.

120
00:06:20,793 --> 00:06:24,529
Lalu saya juga mengaktifkan Word wrap,

121
00:06:24,529 --> 00:06:27,892
tapi sekali lagi, itu tidak terlalu penting.

122
00:06:27,892 --> 00:06:32,892
Oke, jadi menurut saya itu yang paling penting.

123
00:06:33,709 --> 00:06:36,890
Hanya ada satu hal lagi yang perlu Anda ubah.

124
00:06:36,890 --> 00:06:41,890
Dan itu disebut format saat menyimpan.

125
00:06:42,033 --> 00:06:45,731
Baiklah, jadi aktifkan saja yang ini,

126
00:06:45,731 --> 00:06:50,070
yang mengatakan bahwa formatter harus tersedia dan sekarang,

127
00:06:50,070 --> 00:06:52,314
sebenarnya tidak, tetapi di salah satu bagian berikutnya,

128
00:06:52,314 --> 00:06:54,955
kami sebenarnya akan memasang pemformat

129
00:06:54,955 --> 00:06:57,830
untuk memformat kode kita secara otomatis.

130
00:06:57,830 --> 00:07:01,010
Dan pada saat itu, pengaturan ini harus diaktifkan.

131
00:07:01,010 --> 00:07:06,010
Oke dan itu saja untuk kuliah kali ini.

132
00:07:06,089 --> 00:07:09,510
Sekarang, perhatikan bahwa saya sedang mengerjakan Mac di sini,

133
00:07:09,510 --> 00:07:12,428
tetapi semuanya akan bekerja sama persis di Windows

134
00:07:12,428 --> 00:07:14,326
dan di Linux.

135
00:07:14,326 --> 00:07:18,050
Jadi editor VS Code ini seperti yang saya sebutkan sebelumnya,

136
00:07:18,050 --> 00:07:21,014
berfungsi sama di semua platform.

137
00:07:21,014 --> 00:07:26,014
Sekarang, hanya satu penyesuaian terakhir dan kecil yang bisa kita lakukan,

138
00:07:26,369 --> 00:07:27,889
yang baru saja kuingat

139
00:07:27,889 --> 00:07:32,031
apakah selain mengubah tema warna utama,

140
00:07:32,031 --> 00:07:35,834
kita juga dapat mengubah tema ikon file.

141
00:07:35,834 --> 00:07:38,411
Dan sekali lagi, jika Anda menginginkan VS Code Anda

142
00:07:38,411 --> 00:07:40,727
agar terlihat persis sama dengan milikku,

143
00:07:40,727 --> 00:07:45,727
maka Anda dapat memilih ikon Seti ini di sini.

144
00:07:45,810 --> 00:07:49,230
Jadi secara default, menurut saya seharusnya minimal ini,

145
00:07:49,230 --> 00:07:52,070
tapi saya lebih suka yang ini di sini.

146
00:07:52,070 --> 00:07:54,120
Jadi, dengan memilih yang ini di sini,

147
00:07:54,120 --> 00:07:55,489
lalu editor kode Anda

148
00:07:55,489 --> 00:07:59,580
mungkin akan terlihat persis sama dengan milikku.

149
00:07:59,580 --> 00:08:03,370
Baiklah dan dengan itu, kami sebenarnya siap untuk melanjutkan.

150
00:08:03,370 --> 00:08:06,490
Pastikan Anda juga memiliki versi terbaru

151
00:08:06,490 --> 00:08:08,951
Google Chrome terpasang di komputer Anda

152
00:08:08,951 --> 00:08:11,450
karena itu akan menjadi browser

153
00:08:11,450 --> 00:08:14,050
di mana kita akan menguji kode kita.

154
00:08:14,050 --> 00:08:15,970
Baiklah, tapi dengan itu,

155
00:08:15,970 --> 00:08:18,420
kita sekarang benar-benar selesai dengan video ini.

156
00:08:18,420 --> 00:08:20,803
Jadi, sampai jumpa di kesempatan berikutnya.